import { CSSRuleObject, styled } from "styledfc";
import { FlexCss, PositionCss } from "../../../utils/styledfc";
import img from "../img";
import { useState, useEffect } from "react";
const kindList = [
    {
        name: "猫",
        path: img.cat,
        selPath: img.catActive,
        type: 0,
    },
    {
        name: "狗",
        path: img.dog,
        selPath: img.dogActive,
        type: 1,
    },
    {
        name: "爬行",
        path: img.rabbit,
        selPath: img.rabbitActive,
        type: 2,
    },
    {
        name: "小宠物",
        path: img.bird,
        selPath: img.birdActive,
        type: 3,
    },
];
import { useDispatch } from "react-redux";
import { setPetType } from "@/store/modules/petTypeStore";
export default function KindList() {
    const [active, setActive] = useState(0);
    const dispatch = useDispatch();
    const handleClick = (index: number) => {
        setActive(index);
    };
    useEffect(() => {
        dispatch(setPetType(active));
    }, [active]);
    return (
        <div className={kindListStyle.className}>
            <div className="kind__list">
                {kindList.map((item, index) => (
                    <div className="kind__item" key={index} onClick={() => handleClick(index)}>
                        <div className={`kind__item-img ${active === index ? "active" : ""}`}>
                            <img src={active === index ? item.selPath : item.path} />
                            <div className={`line ${active === index ? "active" : ""}`}></div>
                        </div>
                        <span className="kind__item-text">{item.name}</span>
                    </div>
                ))}
            </div>
        </div>
    );
}
const kindListStyle = styled({
    height: "100rem",
    padding: "20rem 20rem 0",
    ...(FlexCss("center") as CSSRuleObject),
    ".kind__list": {
        ...(FlexCss("center", "space-between") as CSSRuleObject),
        width: "100%",
        ".kind__item": {
            color: "#a1b275",
            ".kind__item-img": {
                backgroundColor: "white",
                ...(FlexCss("center", "center") as CSSRuleObject),
                width: "69rem",
                height: "60rem",
                borderRadius: " 22rem",
                position: "relative",
                transition: ".3s",
                ":where(.active)": {
                    backgroundColor: "#a1b275",
                    boxShadow: "0 3rem 10rem #a1b275",
                },
                ">.line": {
                    height: "3rem",
                    width: "19rem",
                    backgroundColor: "transparent",
                    ":where(.active)": {
                        backgroundColor: "#a1b275",
                    },
                    ...(PositionCss("absolute", { bottom: "-8rem", left: "50%" }) as CSSRuleObject),
                    transform: "translateX(-50%)",
                },
                ">img": {
                    width: " 32rem",
                    height: " 32rem",
                },
            },
            ".kind__item-text": {
                paddingTop: "10rem",
                fontSize: "13rem",
                display: "block",
                textAlign: "center",
            },
        },
    },
});
